<template>
  <fragment>
    <fragment v-for="(item, index) in tree" :key="index">
      <el-submenu :index="item.path + ''" v-if="item.children"
        @click="saveItem(item.path, item.meta.title, item.meta.id)">
        <template slot="title">
          <i :class="item.meta.icon || ''"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </template>

        <sidebarItem :tree="item.children"></sidebarItem>
      </el-submenu>

      <el-menu-item :index="item.path + ''" v-else @click="saveItem(item.path, item.meta.title, item.meta.id)">
        <i :class="item.meta.icon || ''"></i>
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </fragment>
  </fragment>
</template>

<script>
export default {
  name: "sidebarItem",
  props: {
    tree: {
      type: Array
    }
  },
  methods: {
    saveItem(op, title, id) {
      //侧边栏激活状态
      this.$store.commit("SET_ACTIVE", op)
      //标签块
      let tag = {
        id: id,
        name: title,
        path: op,
        type: "info"
      }
      this.$store.commit("SET_TAGVAL", tag)

    }
  }
}
</script>

<style scoped></style>

<!-- 
  for 循环进行动态渲染侧边栏时，使用div作为标签进行 for 循环，折叠后文字不消失

  1、首先安装插件 vue-fragment
    npm i -s vue-fragment
  2、在 main.js 应用插件
    import Fragment from 'vue-fragment'
    Vue.use(Fragment.Plugin)
  3、替换 el-menu 下包含的div标签
    <div></div> => <fragment></fragment>
 -->